<template>
  <div>
    <h3>表单控件</h3>
    <input v-model.lazy="myinput" type="text" @input="inputModel">
    {{ myinput }}

    <input v-model.number="num" type="number" @input="inputNum"> {{ num }}
    <br>
    <input v-model="myboolean" type="checkbox"> {{ myboolean }}
    <br>
    爱好 win subing
    <input v-model="mylike" type="checkbox" name="1" value="吃">吃
    <input v-model="mylike" type="checkbox" name="2" value="喝">喝
    <input v-model="mylike" type="checkbox" name="3" value="玩">玩
    {{ mylike }}

    单选：<br>
    <input v-model="use" type="radio" value="js"> js
    <input v-model="use" type="radio" value="java"> java
    <input v-model="use" type="radio" value="php"> php 单选结果{{ use }}
    <br>
    <input v-model="isAllChecked" type="checkbox" @change="seleAll()">
    全选

    <div v-for="i in arraylist" :key="i.id">
      <input v-model="mylikes" type="checkbox" :value="i" @change="select">
      {{ i.like }}
    </div>

    {{ mylikes }}
    <hr>
    事件处理器<br>
    <ul @click.self="clickUl">
      <li @click.stop="clickLi()">
        1111
      </li>
      <li @click="clickLi()">
        22222
      </li>
    </ul>
    <hr>
    <Footer />
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'Form',
  data() {
    return {
      num: '',
      myinput: '',
      myboolean: false,
      mylike: [],
      use: '',
      mylikes: [],
      arraylist: [
        { like: '吃', id: 1 },
        { like: '喝', id: 2 },
        { like: '玩', id: 3 }
      ],
      isAllChecked: false
    }
  },
  mounted() {
    axios.get('http://www.mei.com/appapi/search/searchFind/v3').then((res) => {
      console.log(res)
    })
    axios.get('/node/getData').then((res) => {
      console.log(res)
    })

    axios.post('/node/getData').then((res) => {
      console.log(res)
    })
  },
  methods: {
    inputNum: function() {
      console.log(this.num)
      console.log('value变化我就触发')
    },
    clickUl: function name(params) {
      console.log('点击ul')
    },
    clickLi: function name(params) {
      console.log('点击li')
    },
    inputModel: function() {
      console.log('value变化我就触发')
    },
    seleAll: function() {
      if (this.isAllChecked) {
        this.mylikes = this.arraylist
        console.log(this.mylikes)
      } else {
        this.mylikes = []
      }
    },
    select: function(params) {
      this.isAllChecked =
        this.arraylist.length === this.mylikes.length
    }
  }
}
</script>

